<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="充值规则列表"
      row-key="id"
      :indent="20"
      :columns="columns"
      :request-api="getUserDepositRulesList"
    >
      <template #tableHeader>
        <el-button v-auth="'add'" type="primary" :icon="CirclePlus" @click="openDrawer('新增', ruleInfo)"> 新增 </el-button>
      </template>
      <template #operation="scope">
        <el-button v-auth="'view'" type="primary" link :icon="EditPen" @click="openDrawer('查看', { id: scope.row.id })">
          查看
        </el-button>
        <el-button v-auth="'edit'" type="primary" link :icon="EditPen" @click="openDrawer('编辑', { id: scope.row.id })">
          编辑
        </el-button>
        <el-button v-auth="'delete'" type="primary" link :icon="Delete" @click="deleteCategory(scope.row)"> 删除 </el-button>
      </template>
      <template #startTime="{ row }">
        <div>{{ row.startTime?.slice(0, 11) }}</div>
      </template>
      <template #endTime="{ row }">
        <div>{{ row.endTime?.slice(0, 11) }}</div>
      </template>
    </ProTable>
    <!-- <RechargeRulesDialog ref="dialogRef" /> -->
  </div>
</template>

<script setup lang="tsx" name="rechargeRules">
import { Member } from "@/api/interface";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { useHandleData } from "@/hooks/useHandleData";
import { onUpdated, reactive, ref } from "vue";
// import { memberStatus } from "@/utils/serviceDict";
import { deleteUserDepositRules, getUserDepositRulesList } from "@/api/modules/member";
// import RechargeRulesDialog from "@/views/member/components/RechargeRulesDialog.vue";
import { formatDate } from "@/utils/date-formatter";
import { CirclePlus, Delete, EditPen } from "@element-plus/icons-vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
const proTable = ref<ProTableInstance>();
// 新建会员默认数据
const ruleInfo = reactive({
  id: 0,
  depositType: 1,
  isAccumulation: 2,
  depositRuleStatus: 1,
  startTime: formatDate(0, "start", "yyyy-MM-dd"),
  endTime: formatDate(1, "end", "yyyy-MM-dd")
});

const columns: ColumnProps<Member.ResMemberList>[] = [
  { type: "index", label: "序号", width: 60 },
  { sortable: true, prop: "name", label: "活动名称", minWidth: 180 },
  { sortable: true, prop: "userCategoryName", label: "会员分类", minWidth: 150 },
  // { sortable: true,prop: "userCategoryId", label: "会员分类", minWidth: 180 },
  { sortable: true, prop: "startTime", label: "开始时间", minWidth: 164 },
  { sortable: true, prop: "endTime", label: "结束时间", minWidth: 164 },
  { sortable: true, prop: "depositMoney", label: "充值金额", minWidth: 120 },
  { sortable: true, prop: "giveMoney", label: "赠送金额", minWidth: 120 },
  { sortable: true, prop: "couponCount", label: "赠送卡券数量", minWidth: 140 },
  // { sortable: true,prop: "couponName", label: "赠送卡券名称", minWidth: 200 },
  // { sortable: true,prop: "giftBalance", label: "赠送卡券数量", minWidth: 120 },
  {
    sortable: true,
    prop: "depositTypeText",
    label: "充值类型",
    minWidth: 120
  },
  // enum: memberStatus,
  {
    sortable: true,
    prop: "statusText",
    label: "状态",
    minWidth: 120
  },
  {
    sortable: true,
    prop: "isAccumulation",
    label: "是否累加",
    minWidth: 110,
    enum: [
      { label: "累加", value: 1 },
      { label: "不累加", value: 2 }
    ],
    align: "left"
  },
  { sortable: true, prop: "remark", label: "备注", align: "left", minWidth: 160 },
  { prop: "operation", label: "操作", width: 220, fixed: "right" }
];

const deleteCategory = async (params: Member.ResMemberList) => {
  await useHandleData(deleteUserDepositRules, { id: params.id }, `删除【${params.id}】规则`);
  proTable.value?.getTableList();
};

// const toEdit = (id: number | string) => {
//   getUserDepositRulesDetails({ id: id }).then((res: any) => {
//     openDrawer("编辑", res.data);
//   });
// };
const openDrawer = (title: string, row: any) => {
  const params = {
    title,
    row: { ...row },
    isView: title === "查看"
  };
  router.push("/member/rechargeRulesEdit?params=" + JSON.stringify(params));
};

onUpdated(() => {
  if (route.query.isUpdate) {
    proTable.value?.getTableList();
  }
});
</script>
